<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/web/commons/global.jsp"%>

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />

<title>在线抄经-${chapter.title }-乾隆大藏经-极乐佛经网-提供大藏经下载大全_佛经念诵_经书抄写_助印经书_经书结缘</title>

<meta name="keywords"
	content="在线抄经,${chapter.title },乾隆大藏经,极乐佛经登录,极乐佛经,极乐佛经网,极乐佛经官网" />
<meta name="description"
	content="在线抄经-${chapter.title },${chapter.contentText }" />

<link rel="shortcut icon"
	href="${baseUrl }/resources/img/favicon.ico?a=3" type="image/x-icon" />
<link rel="bookmark" href="${baseUrl }/resources/img/favicon.ico?a=3"
	type="image/x-icon" />

<link href="${baseUrl }/resources/bootstrap-3.3.5/css/bootstrap.min.css"
	rel="stylesheet">
<link
	href="${baseUrl }/resources/font/Font-Awesome-3.2.1/css/font-awesome.min.css"
	rel="stylesheet" />
<link href="${baseUrl }/resources/layer-v2.4/skin/layer.css"
	rel="stylesheet" />
<link
	href="${baseUrl }/resources/bootstrap-slider-7.1.1/css/bootstrap-slider.min.css"
	rel="stylesheet" />

<link rel="stylesheet" href="${baseUrl }/resources/css/app.css" />
<link rel="stylesheet" href="${baseUrl }/resources/css/write/write.css" />


<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
    <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
<script src="${baseUrl }/resources/js/jquery-2.1.4.min.js"
	type="text/javascript">
	
</script>
<script type="text/javascript"
	src="${baseUrl }/resources/js/text_overflow.js"></script>
<script src="${baseUrl }/resources/bootstrap-3.3.5/js/bootstrap.min.js"></script>
<script src="${baseUrl }/resources/layer-v2.4/layer.js"></script>
<script src="${baseUrl }/resources/js/write/write.js"></script>


</head>

<body>
	<%@ include file="/WEB-INF/jsp/web/commons/header.jsp"%>

	<div class="main-content-wrapper">
		<div class="main-content-wrapper-split">
			<section class="main-content">
				<nav class="breadcrumbs-nav">
					<ol class="breadcrumb breadcrumbs-nav-ol">
						<li><a href="${baseUrl }/index.html">首页</a></li>
						<li><a href="${baseUrl }/write/list.html">在线抄经</a></li>
						<li class="active">${chapter.title }</li>
					</ol>
				</nav>
				<div class="book-content-wrapper">
					<div class="book-main-wrapper">
						<div class="book-main">
							<article>
								<header class="hid">
									<h1>${chapter.title }</h1>
								</header>
								<div class="header-div">
									<i></i> <span>${chapter.title }</span>
									<div class="clear-both"></div>
								</div>
								<div class="content-div">
									<div class="extral-div">
										<a href="javaScript:;" onclick="showTips()">*&nbsp;抄经提示</a>
									</div>
									<div class="write-div-wrapper">
										<div class="write-form-wrapper">
											<form role="form" id="writeForm">
												<div class="items-wrapper">
													<div class="items">
														<c:forEach items="${lines }" var="_line"
															varStatus="lineStatus">
															<div class="item">
																<div class="form-group">
																	<span class="target-content"> ${_line } </span>

																	<c:choose>
																		<c:when test="${lineStatus.first }">
																			<input type="text" autofocus="autofocus"
																				id="lineId_${lineStatus.count }"
																				class="form-control clear-radius item-input">
																		</c:when>

																		<c:when test="${lineStatus.last }">
																			<input type="text" autofocus="autofocus"
																				id="lineId_${lineStatus.count }"
																				class="form-control clear-radius item-input hid last">
																		</c:when>
																		<c:otherwise>
																			<input type="text" autofocus="autofocus"
																				id="lineId_${lineStatus.count }"
																				class="form-control clear-radius hid item-input">
																		</c:otherwise>
																	</c:choose>
																	<input class="value-store" value="${_line }">
																</div>
															</div>
														</c:forEach>
													</div>
												</div>
												<!--<button type="submit" class="btn btn-default">保存当前进度</button> -->
											</form>
											<div class="vertical-spacing-30"></div>
											<div class="spit-hr-1"></div>
											<div class="vertical-spacing-15"></div>
											<form role="form" id="dedicateMeritsForm">
												<div class="table-wrapper">
													<table class="table table-bordered">
														<tr>
															<td>佛像选择：</td>
															<td>
																<div class="buddhism-wrapper">
																	<div class="select">
																		<input class="value-store" id="buddhismInput"
																			name="buddhism" value="${buddhisms[0].id }">
																		<div
																			class="btn-group btn-group-vertical  clear-radius">
																			<c:forEach items="${buddhisms }" var="_buddhism"
																				varStatus="buddhismsStatus">
																				<c:choose>
																					<c:when test="${buddhismsStatus.first }">
																						<a type="button"
																							class="btn btn-default clear-radius cur-active"><input
																							class="value-store" value="${_buddhism.id }">
																							<input class="value-store"
																							value="${_buddhism.coverUrl }">
																							${_buddhism.name }</a>
																					</c:when>
																					<c:otherwise>
																						<a type="button"
																							class="btn btn-default clear-radius"><input
																							class="value-store" value="${_buddhism.id }">
																							<input class="value-store"
																							value="${_buddhism.coverUrl }">
																							${_buddhism.name }</a>
																					</c:otherwise>
																				</c:choose>
																			</c:forEach>

																		</div>

																	</div>
																	<div class="show-img-wrapper">
																		<img class="img-rounded"
																			src="${buddhisms[0].coverUrl }" />
																	</div>
																	<div class="clear-both"></div>
																</div>
															</td>
														</tr>
														<tr>
															<td>抄经人：</td>
															<td>
																<div class="form-group input-group-sm">
																	<input name="writeUserName" id="writeUserNameInput"
																		type="text"
																		class="form-control clear-radius info-input"><span
																		class="need-mark">&nbsp;*</span>
																	<div class="clear-both"></div>
																</div>
															</td>
														</tr>
														<tr>
															<td>您的性别：</td>
															<td><label class="radio-inline"> <input
																	type="radio" name="gender" value="1">男
															</label> <label class="radio-inline"> <input type="radio"
																	name="gender" value="2">女
															</label></td>
														</tr>
														<tr>
															<td>您的年龄：</td>
															<td>
																<div class="form-group input-group-sm">
																	<input min="1" name="age" id="ageInput" type="number"
																		class="form-control clear-radius info-input"><span
																		class="need-mark">&nbsp;*</span>
																	<div class="clear-both"></div>
																</div>
															</td>
														</tr>
														<tr>
															<td>您的手机号：</td>
															<td>
																<div class="form-group input-group-sm">
																	<input type="text" name="telephone" id="telephoneInput"
																		class="form-control clear-radius info-input">
																</div>
															</td>
														</tr>
														<tr>
															<td>您的地址：</td>
															<td>
																<div class="form-group input-group-sm">
																	<input type="text" name="address" id="addressInput"
																		class="form-control clear-radius info-input"><span
																		class="need-mark">&nbsp;*</span>
																	<div class="clear-both"></div>
																</div>
															</td>
														</tr>
														<tr>
															<td>回向功德：</td>
															<td>
																<div class="form-group">
																	<textarea name="dedicateMerits"
																		id="dedicateMeritsTextarea"
																		style="border-color: rgba(89, 40, 38, 0.4); background-color: rgba(246, 243, 235, 0.8);"
																		class="form-control info-input" rows="3"></textarea>
																	<span class="need-mark">&nbsp;*</span>
																	<div class="clear-both"></div>
																</div>
															</td>
														</tr>
														<tr>
															<td>总回向：</td>
															<td class="all-dedicate-merits">
																<article>
																	<header> 回向偈 </header>
																	<p style="font-size: 13px;">
																		愿以此功德。庄严佛净土。上报四重恩。下济三途苦。<br>
																		若有见闻者。悉发菩提心。尽此一报身。同生极乐国。
																	</p>
																</article>
															</td>
														</tr>
														<tr>
															<td>验证码：</td>
															<td>
																<div class="form-group input-group-sm">
																	<input type="text" name="verificationCode"
																		id="verificationCodeInput" style="width: 100px;"
																		class="form-control clear-radius info-input">
																	<span class="need-mark">&nbsp;*</span> <img alt="验证码"
																		class="verification-code-img"
																		src="${baseUrl }/validata/img">
																	<div class="clear-both"></div>
																</div>
															</td>
														</tr>
													</table>
												</div>
												<a class="btn btn-default clear-radius" id="saveWriteBook">弟子恭书</a>
											</form>

										</div>
									</div>
								</div>
							</article>
						</div>
						<div class="vertical-spacing-40"></div>
					</div>
				</div>

			</section>
			<div class="clear-both"></div>

			<%@ include file="/WEB-INF/jsp/web/commons/footer.jsp"%>

		</div>
	</div>

	<div class="tips-wrapper hid">
		<div class="tips-content">
			<p>
				1、按照原文在下一行对照输入，如果抄写<span class="text-success">正确文字会显示绿色</span>，<span
					class="text-danger">错误会显示红色</span>。经文中出现的空格必须用全角输入法输入，填写经文以下“功德回向”内容（包括年龄和验证码）均使用半角。
			</p>
			<p>
				2、<span class="text-info">如果遇到某个不会打的生僻字</span> ，可以使用快捷键<span
					class="text-info">（Ctrl+Y）</span> 或者<span class="text-info">（Ctrl+Q）</span>，就会自动输入此字。
			</p>
			<p>
				3、抄写正确的情况下，抄完每行最后一个字符时，输入光标会自动切换到下一行，<span class="text-info">不需用鼠标操作换行。</span>
			</p>
			<!-- 			<p>4、未抄写完的经文可点击下方的“保存进度”按钮保存进度。下次登录系统，此经文会显示在“我未完成的经文”栏里，可点击经文左侧“继续抄写”接着抄写。</p> -->
			<p>
				4、功德回向中，标注“*”为必填项，填写完毕点<span class="text-info">“弟子恭书”</span>提交即可。
			</p>
			<p>5、抄写经文时建议用IE,谷歌等主流浏览器，不支持360极速浏览器、搜狗极速模式。</p>
			<p>
				另：经咒已校对，但还是难免会有疏漏，如有疑问或发现问题，<span class="text-info"> <a
					rel="nofollow"
					href="http://wpa.qq.com/msgrd?v=3&amp;uin=522966625&amp;site=qq&amp;menu=yes"
					target="_blank"> 客服QQ:522966625 <img
						src="http://www.gming.org/nf/uploads/allimg/140310/top_qq.jpg">
				</a>
				</span> ，感恩各位护法善信！
			</p>
			<div class="vertical-spacing-20"></div>
		</div>
	</div>

</body>

<script type="text/javascript">
	var audioId = '${audio.id}';
	var audioSrc = '${audio.playTypes[0].url }';

	//分享配置
	var _BD_TEXT_ = '${audio.title}';
	var _BD_DESC = '${audio.title}--[来自极乐佛经]';
	var _BD_URL = '${baseUrl}/audio/${audio.id}.html';
	var _BD_PIC = '${audio.coverUrl}';

	var _BD_SHARE_COMMON_ = {
		bdText : _BD_TEXT_,
		bdDesc : _BD_DESC,
		bdUrl : _BD_URL,
		bdPic : _BD_PIC
	};
</script>

<script src="${baseUrl }/resources/js/app.js" type="text/javascript">
	
</script>
<script src="${baseUrl }/resources/js/common.js" type="text/javascript"></script>

<script type="text/javascript">
	var bookChapterId = "${chapter.id}";
</script>

</html>